<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html>
<html>
<html:header title="商品详情">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">
    <style type="text/css">
        label{
            display:-moz-inline-box;
            display:inline-block;
            width:80px;
            color: #aaaaaa;
        }

        .info{
            padding: 2px;
        }
    </style>
    <script>

        jQuery(function () {
            layui.use(['form', 'layedit', 'laydate','element','laytpl'], function(){
                var form = layui.form
                    ,layer = layui.layer
                    ,laytpl = layui.laytpl
                    ,laydate = layui.laydate;
                get("${baseUrl}goods/goods/findVoById.action?id=${id}", function (resp) {
                    if (resp.code != 1) {
                        tip("获取商品信息失败");
                        return;
                    }

                    let goodsVo = resp.data;
                    console.log(JSON.stringify(goodsVo));
                    let baseUnit = goodsVo.goodsUnitVoList[0];
                    $("#goodsImg").attr("src", "${baseUrl}img/goods/"+goodsVo.image);
                    $.each(goodsVo.goodsHouseWarnList, function (i, vo) {
                        $("[minHouseId='"+vo.houseId+"']").html(getNumber(vo.min));
                        $("[maxHouseId='"+vo.houseId+"']").html(getNumber(vo.max));
                    });

                    $.each(goodsVo.goodsInitList, function (i, goodsInit) {
                        $("[initNumHouseId='"+goodsInit.houseId+"']").html(getNumber(goodsInit.initNum));
                        $("[initCostHouseId='"+goodsInit.houseId+"']").html(getPrice(goodsInit.initCost));
                        $("[initAmtHouseId='"+goodsInit.houseId+"']").html(getPrice(goodsInit.initAmt));
                    });

                    $("#name").html(goodsVo.name);
                    $("#no").html(goodsVo.no);
                    $("#norms").html(goodsVo.norms);
                    $("#type").html(goodsVo.type.name);
                    $("#name").html(goodsVo.name);
                    $("#remark").html(goodsVo.remark);

                    let unit = "";
                    let code = "";
                    $.each(goodsVo.goodsUnitVoList, function (i, goodsUnitVo) {
                        if (i == 0){
                            unit += goodsUnitVo.unit.name;
                            code += goodsUnitVo.code;
                        } else {
                            unit += "、" + goodsUnitVo.unit.name +"(1" +goodsUnitVo.unit.name + "="+goodsUnitVo.times+ baseUnit.unit.name +")";
                            code += "、" + goodsUnitVo.unit.name + "(" + goodsUnitVo.code + ")";
                        }
                    });
                    $("#unit").html(unit);
                    $("#code").html(code);


                    if (emptyList(goodsVo.attrNameVoList)){
                        $("#attr-parent").hide();
                    } else {
                        $("#attrDiv").empty();
                        $.each(goodsVo.attrNameVoList, function (i, attrNameVo) {
                            let child = "";
                            child += "<div class='info'><label>"+attrNameVo.name+":</label>\n";
                            $.each(attrNameVo.attrList, function (i,attr) {
                                child += attr.attrValue;
                                if (i != attrNameVo.attrList.length-1) {
                                    child += "、";
                                }
                            });
                            child += "</div>";
                            $("#attrDiv").append(child);
                        });
                    }


                    var getTpl = priceTable.innerHTML;
                    laytpl(getTpl).render(goodsVo.goodsUnitVoList, function(html){
                        $("#price-div").empty().append(html);
                    });

                    $("#sn").html(goodsVo.sn ? "启用" : "停用");
                });

            });
        });

        function getValue(value) {
            return emptyEntity(value) ? "" : getPrice(value);
        }
    </script>
</html:header>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm3 layui-col-md2">
                <img id="goodsImg" src="" alt="" style="background-color:#eeeeee;border: 4px solid #eeeeee; border-radius: 4px;width: 160px;height: 160px;"
                     onerror="this.src='${baseUrl}images/noImg.jpg'">
            </div>
            <div class="layui-col-xs12 layui-col-sm9 layui-col-md10 pdl20">
                <div>基本信息</div>
                <hr>
                <div style="font-size: 20px;font-weight: bold;" id="name"></div>
                <div class="info"><label>编  号:</label><span id="no"></span></div>
                <div class="info"><label>规  格:</label><span id="norms"></span></div>
                <div class="info"><label>分  类:</label><span id="type"></span></div>
                <div class="info"><label>单  位:</label><span id="unit"></span></div>
                <div class="info"><label>条  码:</label><span id="code"></span></div>


                <div id="attr-parent">
                    <div style="padding-top: 20px;">属性</div>
                    <hr>
                    <div id="attrDiv"></div>
                </div>

                <div style="padding-top: 20px;">价格</div>
                <hr>
                <div id="price-div" style="overflow: auto"></div>

                <div style="padding-top: 20px;">库存预警</div>
                <hr>
                <div style="overflow: auto">
                    <table class="layui-table" style="min-width: 700px;">
                        <thead>
                        <th>门店</th>
                        <th>仓库</th>
                        <th>最低库存量</th>
                        <th>最搞库存量</th>
                        </thead>

                        <tbody>
                        <c:forEach items="${houseVoList}" var="houseVo" varStatus="status">
                            <tr>
                                <td>${houseVo.store.name}</td>
                                <td>${houseVo.name}</td>
                                <td minHouseId="${houseVo.id}"></td>
                                <td maxHouseId="${houseVo.id}"></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>

                <div style="padding-top: 20px;">初期信息</div>
                <hr>
                <div style="overflow: auto">
                    <table class="layui-table" style="min-width: 700px;">
                    <thead>
                    <th>门店</th>
                    <th>仓库</th>
                    <th>初期数量</th>
                    <th>初期成本</th>
                    <th>初期总额</th>
                    </thead>

                    <tbody>
                    <c:forEach items="${houseVoList}" var="houseVo" varStatus="status">
                        <tr>
                            <td>${houseVo.store.name}</td>
                            <td>${houseVo.name}</td>
                            <td initNumHouseId="${houseVo.id}"></td>
                            <td initCostHouseId="${houseVo.id}"></td>
                            <td initAmtHouseId="${houseVo.id}"></td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                </div>

                <div style="padding-top: 20px;">其他</div>
                <hr>
                <c:if test="${industryType.type eq 2}">
                    <div class="info"><label>序列号:</label><span id="sn"></span></div>
                </c:if>
                <div class="info"><label>备  注:</label><span id="remark"></span></div>
            </div>
        </div>
    </div>
</div>
</body>

<script id="priceTable" type="text/html">
    <table class="layui-table" style="min-width: 700px;">
        <thead>
        <tr>
            <th >价格类别</th>
            {{#  for(var i=0; i < parseInt(d.length); i++){ }}
            {{#  var unitName = d[i].unit.name; }}
            <th >价格/{{unitName}}</th>
            {{#  } }}
        </tr>
        </thead>

        <tbody>
        <tr>
            <td >零售价</td>
            {{#  for(var i=0;i < parseInt(d.length); i++){ }}
            {{#  var price = getValue(d[i].retailPrice); }}
            <td>{{price}}</td>
            {{#  } }}
        </tr>
        <tr>
            <td >批发价</td>
            {{#  for(var i=0;i < parseInt(d.length); i++){ }}
            {{#  var price = getValue(d[i].wholesalePrice); }}
            <td>{{price}}</td>
            {{#  } }}
        </tr>
        <tr>
            <td >最低售价</td>
            {{#  for(var i=0;i < parseInt(d.length); i++){ }}
            {{#  var price = getValue(d[i].minPrice); }}
            <td>{{price}}</td>
            {{#  } }}
        </tr>
        <tr>
            <td >参考进货价</td>
            {{#  for(var i=0;i < parseInt(d.length); i++){ }}
            {{#  var price = getValue(d[i].referBuyPrice); }}
            <td>{{price}}</td>
            {{#  } }}
        </tr>
        </tbody>
    </table>
</script>
</html>